<template>
	<div id="Flow" class="waterfall">
		<div :class="[{'defaultUl':show},'waterfall-top', 'swiper']">
			<ul class="swiper-wrapper" >
				<li class="swiper-slide" :data-history='item.id' v-for="item in list"  :key="item.id" @click="but(item.id,item.name)">
					<router-link to=''>
						<label :class="{'default':index==item.id}">{{item.name}}</label>
					</router-link>
				</li>
			</ul>
		</div>
		<Waterlist></Waterlist>
	</div>
</template>

<script>
	import {mapMutations,mapState} from 'vuex'
	import Waterlist from './Waterlist.vue'
	// 1.引入vue周期函数
	import {onMounted} from 'vue';
	// 2.引入swiper的动态组件
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
	}from 'swiper';
	//3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube]);
	export default{
		name:'Waterfall',
		components:{
			Waterlist
		},
		data() {
			return{
				list:[
					{id:1,name:'全球经典'},
					{id:2,name:'户外'},
					{id:3,name:'亲子'},
					{id:4,name:'摄影'},
					{id:5,name:'人文'},
					{id:6,name:'房车'},
					{id:7,name:'海岛'},
					{id:8,name:'露营'},
					{id:9,name:'自驾'},
					{id:10,name:'越野派'},
					{id:11,name:'同城'},
					{id:12,name:'骑行'},
					{id:13,name:'赛事'},
					{id:14,name:'赏秋'}
				],
				index:1,
				show:false,
				Flow_offsetTop:0
			}
		},
		// 4.设置应用swiper的位置以及具体操作
		setup(){
			onMounted(()=>{
				new Swiper('.waterfall-top',{
					slidesPerView : 5.8,
					slideToClickedSlide: true,
					centeredSlides : true,
					centeredSlidesBounds:true
				})
			})
		},
		methods:{
			but(id,val){
				this.gettitle(val)
				this.index=id
				document.documentElement.scrollTop=this.Flow_offsetTop
			},
			fiexMeuns(){
				let sTop = window.pageYOffset || document.documentElement.scrollTop;
				sTop >= this.Flow_offsetTop?this.show=true : this.show=false;
				// 下滑更新1.获取当前滚动条的位置以及当前网页的高度+设备高度；2.监听滚动事件，高度的获取，以及如果滚动条到达底部，发起一个新的异步请求
				/*
					1.监听滚动事件，获取高度，判断高度是否到达底部 ====> 调用异步请求函数（第一个函数）
					2.异步函数内，默认发起第一页的请求page=1，页码就需要自增+1，当滚动条事件到达底部，发起page的请求数据（第二个函数）
					3.整理获取数据
				*/
			},
			...mapMutations(['gettitle'])
		},
		mounted() {
			this.Flow_offsetTop=Flow.offsetTop
			let timer;
			let flag = false;//判断是否打开滚动监听的函数
			 window.addEventListener('scroll',()=>{
				 //设置定时器
				 if(flag){
					 this.fiexMeuns();
				 }
				 flag = false;
				 //清除定时器
				 clearTimeout(timer);
				 //设置定时器，每隔15毫秒，打开一次开关
				 timer = setTimeout(()=>{flag=true},10);
			},true)
		},
		computed:{
			...mapState(['title'])
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.waterfall{
		width: 95%;
		margin: 0 auto ;
		overflow: hidden;
		box-shadow: 0 0 10px #d8d8d8;
		background-color: #dedede;
	}
	 .waterfall .waterfall-top {
		width: 100%;
		line-height: 1rem;
		background-color: white;
	}
	.waterfall-top ul{
		margin-top: 0.2rem;
		width: 100%;
	}
	.defaultUl{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}
	.waterfall-top ul li{
		text-align: center;
		width: 16.5%;
		float: left;
		display: inline-block;
		height: 100%;
	}
	.waterfall .waterfall-top .swiper-wrapper{
		transition-duration: 0ms;
	}
	.waterfall-top ul li label{
		width: 100%;
		font-size: 0.34rem;
		text-align: center;
		width: 16.6%;
		margin-left: 0.01rem;
		line-height: 0.8rem;
	}
	.waterfall-top ul li .default{
		display: inline-block;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0.38rem;
		height: 1rem;
		font-weight: bold;
		width: 100%;
		background-image: url(../../../assets/img/Waterfall-bg01.png);
		background-size: 70% 100%;
		background-repeat: no-repeat;
		background-position:center center;
	}
</style>
